<template>
  <Dialog :title="title" :model-value="visible" width="700px" :before-close="closeForm">
    <Form
      :schema="schema"
      :model="empPost"
      @register="formRegister"
      label-width="120px"
      :isCol="false"
      :rules="rules"
    />
    <template #footer>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </template>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog/src/Dialog.vue'
import { add } from '@/api/emp/empPost'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
import { Form } from '@/components/Form'
import { HrItemDic } from '@/config/publicDic'
export default {
  name: 'AddEmpPost',
  components: {
    Dialog,
    Form
  },
  props: {
    empId: {
      type: String,
      default: null
    },
    comId: {
      type: String,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新增岗位',
      empPost: {},
      schema: [],
      rules: {
        DeptId: [
          {
            required: true,
            message: '任职部门不能为空！',
            trigger: 'blur'
          }
        ],
        CompanyId: [
          {
            required: true,
            message: '任职公司不能为空！',
            trigger: 'blur'
          }
        ],
        PostCode: [{ required: true, message: '岗位不能为空!', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    formRegister,
    reset() {
      this.empPost = {
        CompanyId: this.comId
      }
      this.initScheme()
    },
    initScheme() {
      this.schema = [
        {
          field: 'CompanyId',
          label: '任职公司',
          component: 'CompanySelect',
          componentProps: {
            parentId: this.comId,
            placeholder: '请选择任职公司'
          }
        },
        {
          field: 'DeptId',
          label: '入职部门',
          component: 'DeptSelect',
          bind: { CompanyId: 'companyId' },
          componentProps: {
            companyId: this.empPost.CompanyId,
            isChioseUnit: false,
            status: [1],
            placeholder: '请选择入职部门'
          }
        },
        {
          field: 'PostCode',
          label: '岗位',
          component: 'TreeDicItem',
          componentProps: {
            dicId: HrItemDic.post,
            placeholder: '请选择岗位'
          }
        }
      ]
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      } else {
        this.add(data)
      }
    },
    async add(data) {
      data.EmpId = this.empId
      await add(data)
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      this.empPost = {
        CompanyId: this.comId
      }
      this.initScheme()
    }
  }
}
</script>
